<template>
    <div class="verifyCode-wrapper flex-auto">
        <el-input
            v-model="verifyCode"
            class="flex-1"
        ></el-input>
        <el-button type="primary" style="background-color: #01ddff;" class="radius-0" :loading="loading" :disabled="codeDisabled" @click="sendCode">{{ codeDisabled ? `${secondNum}s后可发送` : '发送验证码' }}</el-button>
    </div>
</template>

<script>
import service from "@service";

import {mobileReg} from "@utils";
// import {customerRegister,sendSmsVerificationCode} from "@services";
// import { mapGetters } from "vuex";

export default {
    name: "verifyCode",
    props: {
        value: [String],
        phone: [String,Number,Boolean],// 手机号
        sendKey: {// 手机号对应字段
            type: String,
            default: 'mobile'
        },
        sendType: {// 类型
            type: String,
            default: 'REG'
        },
        second: {
            type: Number,
            default: 120
        },
        validator: Function,
        paramsHandle: Function,
        serviceName: {
            type: String,
            default: 'sendSmsVerfCode'
        },
        paramsType: {
            type: String,
            default: 'data'
        }
    },
    data() {
        return {
            loading: false,
            codeDisabled: false, // 验证码可点击
            secondNum: this.second, // 验证秒数
            timer: null,
        };
    },
    computed: {
        verifyCode: {
            get() {
                return this.value;
            },
            set(n) {
                this.$emit('input', n);
            }
        }
    },
    methods: {
        // 发送验证码
        async sendCode() {
            if(this.phone !== false) {
                if(!mobileReg.test(this.phone)) {
                    this.$message.warning('请输入正确的手机号码')
                    return;
                }
            }
            if(this.validator) {
                
                let errorMessage = await this.validator();
                if(errorMessage) {
                    return;
                }
            }
            this.loading = true;
            let sendKey = this.sendKey;
            let params = {
                [sendKey]: this.phone,
                sendType: this.sendType
            }

            if(this.paramsHandle) {
                params = this.paramsHandle(params);
            }

            let result = await service(this.serviceName, {
                [this.paramsType]: params
            }).catch(e => {
                this.loading = false;
            });
            this.loading = false;
            if(result) {
                this.codeDisabled = true;
                this.timer = setInterval(() => {
                    this.secondNum--;
                    if(this.secondNum<=0) {
                        this.codeDisabled = false;
                        this.secondNum = this.second;
                        clearInterval(this.timer);
                    }
                },1000);
            }else {
                this.loading = false;
            }
        }
    },
    destroyed() {
        clearInterval(this.timer);
    }
};
</script>
<style lang="scss" scoped>
.verifyCode-wrapper {
    display: flex;
}
</style>
